<template>
  <BasicModal v-bind="$attrs" @register="register" showFooter :title="getTitle" width="70%" @ok="handleSubmit"
              @cancel="closeFn">
    <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">

      <BasicTable @register="registerTable" >
        <template #toolbar>
          <!--        <a-button type="primary" @click="handleCreate">新增账号</a-button>-->
        </template>

      </BasicTable>
    </PageWrapper>
  </BasicModal>

</template>
<script lang="ts" setup>
import { reactive, unref, ref } from 'vue';

import { BasicTable, useTable, TableAction } from '@/components/Table';
import { departmentList } from '@/api/sys/msUser';
import { PageWrapper } from '@/components/Page';
import { BasicModal, useModalInner } from '@/components/Modal';

// import DeptTree from './DeptTree.vue';

import { useModal } from '@/components/Modal';
import AccountModal from './AccountModal.vue';

import { columns, searchFormSchema } from './account.data';
import { useGo } from '@/hooks/web/usePage';
import { useMessage } from "@/hooks/web/useMessage";
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();

const emit = defineEmits(['success']);

const { createMessage } = useMessage();

defineOptions({ name: 'AccountManagement' });
const props = defineProps({
  mode: { type: String, default: "multiple" },
});

let str = ""

const selectIds = ref([]);
const syncLoadLoading = ref(false);
const go = useGo();
const [registerModal, { openModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, clearSelectedRowKeys, getSelectRows, setSelectedRowKeys }] = useTable({
  title: 'ms部门列表',
  api: departmentList,
  rowKey: 'tid',
  columns,
  formConfig: {
    // labelWidth: 120,
    schemas: searchFormSchema,
    autoSubmitOnEnter: true,
  },
  pagination: { pageSize: 30 },
  rowSelection: {
    onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
      //  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      selectIds.value = selectedRows
    },
    onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
      //  console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {

    },

  },
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
});



const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
  clearSelectedRowKeys();

  //打开弹层
  // console.log("---接收data",data.ids)
  if (data.ids) {
    let arr = data.ids.split(",");
    setSelectedRowKeys(arr);
  }
  // console.log("----clearSelectedRowKeys::")
  // debugger
});


const getTitle = "选择部门";
const isUpdate = ref(false);


function handleEdit(record: Recordable) {
  console.log(record);
  openModal(true, {
    record,
    isUpdate: true,
  });
  isUpdate.value = true;
  // userStore.setChatIsUpdate(true);

}

async function handleSubmit() {
  let selectRows = getSelectRows();

  if (!selectRows.length) {
    createMessage.error("请先勾选数据!");
    return false;
  }
  //  console.log("---props.mode",props.mode)
  if (props.mode === "single") {
    if (selectRows.length > 1) {
      createMessage.error("请只选择一条数据!");
      return false;
    }
  }
  // console.log("---selectRows",selectRows);
  emit('success', selectRows);
  closeFn();
  // console.log("----selectIds",selectIds.value)
}

function handleDelete(record: Recordable) {
  console.log(record);
}

function closeFn() {
  clearSelectedRowKeys();
  closeModal()
}



function handleView(record: Recordable) {
  go('/system/account_detail/' + record.chatid);
}
</script>
